<!--
 * @Description: 天气预报
 * @Date: 2022-07-05 14:13:28
 * @LastEditTime: 2022-08-21 17:18:37
 * @FilePath: /demo_important/src/views/WeatherForecast/index.vue
 * @Author: byhzdemacbook-pro-2.local
-->
<template>
  <div>
    <v-mini-weather></v-mini-weather>
    <span>{{ weather }}</span
    ><span v-if="lower">{{ lower }}~{{ higher }}</span>
    <el-date-picker
      class="application-el cascader"
      v-model="pickerValue"
      value-format="yyyy-MM"
      format="yyyy-MM"
      type="month"
      placeholder="月份统计"
    >
    </el-date-picker>
  </div>
</template>

<script>
import { vMiniWeather } from 'vue-mini-weather';
import windowUtils from '@/utils/windowUtils';
import axios from 'axios';
export default {
  name: 'WeatherForecast',
  components: {
    vMiniWeather,
  },
  props: {},
  data() {
    return {
      //
      weather: '',
      lower: '',
      higher: '',
      pickerValue: '',
      beginTime: '',
      endTime: '',
    };
  },
  computed: {},
  watch: {
    pickerValue(e) {
      if (e) {
        console.log(windowUtils.getMonthRange(e));
        this.beginTime = windowUtils.getDateStamp(
          windowUtils.getMonthRange(e).startTime,
          0,
        );
        this.endTime = windowUtils.getDateStamp(
          windowUtils.getMonthRange(e).endTime,
          1,
        );
      } else {
        this.beginTime = '';
        this.endTime = '';
      }
      console.log(new Date(this.endTime));
    },
  },
  created() {},
  mounted() {
    this.getWeather();
  },
  methods: {
    getWeather() {
      axios
        .get(`http://wthrcdn.etouch.cn/weather_mini?city=杭州`)
        .then((res) => {
          console.log(res);
          this.weather = res.data.data.forecast[0].type
            ? res.data.data.forecast[0].type
            : '';
          this.lower = res.data.data.forecast[0].low.substr(2);
          this.higher = res.data.data.forecast[0].high.substr(2);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
